import React, { Component } from 'react';
import styled from 'styled-components';
import { Modal, Toast } from 'antd-mobile'
import '../css/style.css'
import axios from 'axios'


const SignDiv = styled.div`
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
.input1{
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    border: 1px solid #de3232;
    border-radius: 5px;
    width: 100%;
    min-width: 1px;
    height: 38px;
    padding-left: 10px;
    outline: none;
    font-size: 18px;      
}
.input1::placeholder{
    color: #a5a5a5;
    font-size: 18px;
}

.login_btn{
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-width: 1px;
    height: 38px;
    border-radius: 5px;
    background-color: #de3232;
    color: #ffffff;
    font-size: 18px;
    outline: none;
    border:none;
    text-align: center;
}
.link_btn{
    color: #4d35a6;
    font-size: 14px;
    text-decoration: underline;
}

.avater_btn{
    display: inline-block;
    width: 45px;
    height: 45px;
    border: 1px solid #888888;
    border-radius: 4px;
    position: relative;
}

.avater_btn::before{
    content: '';
    display: inline-block;
    width: 30px;
    height: 2px;
    background-color: #888888;
    position: absolute;
    top: 50%;
    margin-top: -1px;
    left: 50%;
    margin-left: -15px;
}

.avater_btn::after{
    content: '';
    display: inline-block;
    width: 2px;
    height: 30px;
    background-color: #888888;
    position: absolute;
    top: 50%;
    margin-top: -15px;
    left: 50%;
    margin-left: -1px;
}
.files{
    width:45px;
    height:45px;
    border:1px solid red ;
    position: absolute;
    left:10px;
    opacity:0;
    z-index:100;
}
.imgbox{
    width:45px;
    height:45px;
    border:1px solid red ;
    position: absolute;
    left:10px;
}
.itemname{
    color: #a5a5a5;
    font-size: 18px;
    line-height: 22px;
}

`

class Sign extends Component {
    state = {
        username: '',
        pw: '',
        pws: '',
        imgs: '',
        imgif: ''
    }
    handle = (e) => {
        // console.log(e);
        this.setState({
            [e.target.name]: e.target.value
        })
        // console.log(this.state)
    }
    handles = (e) => {
        this.setState({
            imgs: e.target.files[0]
        })
        var that = this
        var files = e.target.files[0];
        var render = new FileReader()
        render.readAsDataURL(files);
        render.onload = function () {
            that.refs.img.src = this.result
        }
        // console.log(this.state)
    }
    //注册按钮
    register = () => {

        console.log(this.state)

        if (this.state.username && this.state.pw && this.state.imgs) {
            let dd = new FormData();
            dd.append('username', this.state.username)
            dd.append('password', this.state.pw)
            dd.append('avatar', this.state.imgs)

            console.log(dd)
            axios.post('https://www.young1024.com:3002/sign', dd).then(res => {
                if (res.data.status === 'success') {
                    Modal.alert({
                        content: '注册成功',
                        confirmText: '前往登录',
                        onConfirm: () => {
                            this.props.history.replace('/login')
                        },
                    })
                } else {
                    Toast.show({
                        content: res.data.msg,
                        position: 'top',
                    })
                }
            }).catch(err => {
                console.log(err)
            })
        }

    }
    //验证两次密码
    blurpw = () => {
        if (this.state.pw !== this.state.pws) {
            Toast.show({
                content: "两次密码不相等！！",
                position: 'top',
            })
        }
    }
    render() {
        return (
            <SignDiv>
                <div className="m_t25">
                    <input value={this.state.username} type="text" className="input1" placeholder="用户名" onChange={this.handle} name='username' />
                </div>

                <div className="m_t25">
                    <input value={this.state.pw} type="password" className="input1" placeholder="密码" onChange={this.handle} name="pw" />
                </div>

                <div className="m_t25">
                    <input value={this.state.pws} type="password" className="input1" placeholder="重复密码" onChange={this.handle} name="pws" onBlur={this.blurpw} />
                </div>

                <div className="m_t25">
                    <div className="itemname">头像</div>


                    <div>
                        <b className="avater_btn"></b>
                        <input type="file" onChange={this.handles} name="imgs" className="files" accept='images/*' />
                        {/* {this.refs.img.src === '' ? '' : <img src="" className='imgbox' ref='img' />} */}

                        <img src="" className='imgbox' ref='img' onError={(e) => { e.target.onerror = null }} />
                    </div>

                </div>


                <div className="m_t25" >
                    <input type="button" className="login_btn" onClick={this.register} value="注册" />
                </div>




                <div className="m_t15">

                    <div className="tar">
                        <a className="link_btn" onClick={() => {
                            this.props.history.push('/login')
                        }}>登录</a>
                    </div>

                </div>
            </SignDiv>
        );
    }
}

export default Sign;
